import React, { useEffect, useState } from 'react';

import * as echarts from 'echarts/core';
import { TooltipComponent, GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

// import { getTradeOfMoney } from '../../utils/api'

echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
const HistogramChart = () => {

    const [arr,setArr] = useState([])
    const showTradeOfMoney = () => {
        // getTradeOfMoney().then(res => {
        //     console.log(res.result);
        //     setArr(res.result)
        // })
    }
    useEffect(() => {
        showTradeOfMoney()
        //顶部图表
        var transactionsChart = echarts.init(document.getElementById('transactionsCharts'))
        transactionsChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: arr
                }
            ]
        })
    },[arr])

    return <>
        <div id='transactionsCharts' style={{ width: "800px", height: "200px" }} />
    </>
}

export default HistogramChart